<template>
  <div class="my_container">
    <nav class="navbar ">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="/">
            <img src="/logo.png" alt="Logo" style="height: 40px; width: auto;"/> <!-- Logo 图片 -->
          </a>
          <!-- 搜索框 -->
          <div id="search-box" class="navbar-item" data-v-314f53c6="">
            <input type="text" placeholder="搜索..." class="input" data-v-314f53c6="">
            <button class="search-button" data-v-314f53c6="">搜索</button>
          </div>
        </div>
        <div class="navbar-menu">
          <div class="navbar-top">
            <div class="navbar-end">
            </div>
          </div>
          <div class="navbar-bottom">
            <div class="header-nav">
              <div class="nav-column">
                <div class="nav-column-in">
                  <!-- Replace the links with your website's actual links -->
                  <ul id="j_main_nav">
                    <li><a href="http://www.ddooo.com" class="nav-cur" target="">首页</a></li>
                    <li rel="2"><a href="http://www.ddooo.com/softlist/" target="">菜单1</a></li>
                    <li rel="3"><a href="http://www.ddooo.com/az/" target="">菜单2</a></li>
                    <!-- and so on ... -->
                  </ul>
                </div>
              </div>
              <!-- and your sub-nav components -->
              <!-- ... -->
            </div>
          </div>
        </div>
      </div>
    </nav>
    <nuxt class=""/> <!-- 此处将显示每个页面的内容 -->
  </div>
</template>


<style scoped>
.navbar {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my_container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}

.navbar-brand {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 让navbar-brand占满整个容器的宽度 */
}

.navbar-menu {
  background-color: #1e89e0;
}

.navbar-item {
  padding: 1em;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 让header-nav占满整个容器的宽度 */
}

.nav-column {
  display: flex;
  flex-direction: column;
  width: 100%; /* 让nav-column占满整个容器的宽度 */
}

.navbar-menu {
  display: flex;
  flex-direction: column;
  width: 100%; /* 让navbar-menu占满整个容器的宽度 */
}

.navbar-top, .navbar-bottom {
  display: flex;
  justify-content: space-between;
}

#search-box {
  background-color: #1e89e0;
  padding: 10px;
  color: white;
  max-height: 25px;
}

.search-button {
  background-color: #1e89e0;
  color: white;
  cursor: pointer;
  outline: none;
  border: none;
}


#j_main_nav li {
  display: inline-block;
  margin-right: 10px; /* 调整链接之间的间距 */
  min-width: 100px;
  text-align: center; /* 文字水平居中对齐 */
  vertical-align: middle; /* 文字垂直居中对齐 */
  line-height: 1.0; /* 调整行高，以使文字垂直居中 */
  color: white;
}

#j_main_nav li a {
  color: white !important;
  font-size: 18px;
}

#j_main_nav li:last-child {
  margin-right: 0; /* 移除最后一个链接的右侧间距 */
}
</style>
